import '../css/scall.css'

const scroll = document.querySelector('#scroll')
scroll.style.height = `${50000 - window.innerWidth / 2 - 20}px`
const main = document.querySelector('#main')
const wrapper = document.querySelector('#wrapper')
const man = document.querySelector('#man')
main.addEventListener('scroll', () => {
    let scrollTop = main.scrollTop
    wrapper.style.transform = `translate(-${scrollTop}px)`
    man.style.transform = `translate(${scrollTop}px)`
    if (scrollTop > 300) {
        let x = scrollTop - 300
        let y = 0.01 * Math.pow(x, 2)
        if (y > 120) {
            y = 120
        }
        if (scrollTop > 550) {
            let x = scrollTop - 550
            y = 120 - 0.01 * Math.pow(x, 2)
        }
        man.style.transform = `translate(${scrollTop}px,-${y}px)`
    }
})
main.scrollTo(0, '100px')
